{% extends "base.html" %}

{% block title %}我分配的任务{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>我分配的任务</h2>
        <div>
            <a href="{{ url_for('main.home') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>返回首页
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0">任务列表</h5>
                </div>
                <div class="col-md-6 text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary active" onclick="filterTasks('all')">全部</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('未开始')">未开始</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('进行中')">进行中</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterTasks('已完成')">已完成</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if tasks %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>任务名称</th>
                                <th>项目</th>
                                <th>负责人</th>
                                <th>状态</th>
                                <th>优先级</th>
                                <th>进度</th>
                                <th>截止日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in tasks %}
                                <tr data-status="{{ task.status }}">
                                    <td>
                                        <a href="{{ url_for('project.project_detail', id=task.project_id) }}#task-{{ task.id }}">{{ task.name }}</a>
                                        {% if task.description %}
                                            <small class="d-block text-muted">{{ task.description[:50] }}{% if task.description|length > 50 %}...{% endif %}</small>
                                        {% endif %}
                                    </td>
                                    <td>{{ task.project.name }}</td>
                                    <td>{{ task.assignee.name if task.assignee else '未分配' }}</td>
                                    <td>
                                        {% if task.status == '未开始' %}
                                            <span class="badge bg-secondary">{{ task.status }}</span>
                                        {% elif task.status == '进行中' %}
                                            <span class="badge bg-primary">{{ task.status }}</span>
                                        {% elif task.status == '已完成' %}
                                            <span class="badge bg-success">{{ task.status }}</span>
                                        {% else %}
                                            <span class="badge bg-danger">{{ task.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if task.priority == '高' %}
                                            <span class="badge bg-danger">{{ task.priority }}</span>
                                        {% elif task.priority == '中' %}
                                            <span class="badge bg-warning">{{ task.priority }}</span>
                                        {% else %}
                                            <span class="badge bg-info">{{ task.priority }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar" role="progressbar" style="width: {{ task.progress }}%;" 
                                                 aria-valuenow="{{ task.progress }}" aria-valuemin="0" aria-valuemax="100">
                                                {{ task.progress }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ task.end_date.strftime('%Y-%m-%d') if task.end_date else '-' }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('task.task_form', id=task.id) }}" class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-info" onclick="showTaskDetails({{ task.id }})">
                                                <i class="fas fa-info-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-user-check fa-3x text-muted mb-3"></i>
                    <h5>暂无分配的任务</h5>
                    <p class="text-muted">您目前还没有分配任何任务</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 任务详情模态框 -->
<div class="modal fade" id="taskDetailModal" tabindex="-1" aria-labelledby="taskDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskDetailModalLabel">任务详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="taskDetailContent">
                <!-- 任务详情内容将通过AJAX加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="editTaskBtn">编辑任务</button>
            </div>
        </div>
    </div>
</div>

<script>
function filterTasks(status) {
    // 更新按钮状态
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // 过滤任务
    const rows = document.querySelectorAll('tbody tr');
    rows.forEach(row => {
        if (status === 'all' || row.dataset.status === status) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

function showTaskDetails(taskId) {
    fetch(`/api/task/${taskId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const task = data.task;
                let content = `
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>任务名称:</strong> ${task.name}</p>
                            <p><strong>项目:</strong> ${task.project_name}</p>
                            <p><strong>负责人:</strong> ${task.assignee_name || '未分配'}</p>
                            <p><strong>状态:</strong> <span class="badge bg-${getStatusBadgeClass(task.status)}">${task.status}</span></p>
                            <p><strong>优先级:</strong> <span class="badge bg-${getPriorityBadgeClass(task.priority)}">${task.priority}</span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>开始日期:</strong> ${task.start_date || '-'}</p>
                            <p><strong>截止日期:</strong> ${task.end_date || '-'}</p>
                            <p><strong>进度:</strong> ${task.progress}%</p>
                            <p><strong>预计工时:</strong> ${task.estimated_hours || 0}小时</p>
                            <p><strong>实际工时:</strong> ${task.actual_hours || 0}小时</p>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <p><strong>任务描述:</strong></p>
                            <div class="border rounded p-3 bg-light">
                                ${task.description || '无描述'}
                            </div>
                        </div>
                    </div>
                `;
                
                document.getElementById('taskDetailContent').innerHTML = content;
                document.getElementById('editTaskBtn').onclick = function() {
                    window.location.href = `/task/form?id=${taskId}`;
                };
                
                const modal = new bootstrap.Modal(document.getElementById('taskDetailModal'));
                modal.show();
            } else {
                showFlashMessage('获取任务详情失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showFlashMessage('获取任务详情失败，请稍后重试', 'error');
        });
}

function getStatusBadgeClass(status) {
    switch(status) {
        case '未开始': return 'secondary';
        case '进行中': return 'primary';
        case '已完成': return 'success';
        default: return 'danger';
    }
}

function getPriorityBadgeClass(priority) {
    switch(priority) {
        case '高': return 'danger';
        case '中': return 'warning';
        case '低': return 'info';
        default: return 'secondary';
    }
}
</script>
{% endblock %}